<template>
    <div id="home">
        <el-row :gutter="20" v-if="isCreated">
            <el-col :span="12" class="parent">
                <class-average-chart :data="{ studentList, classList, tagList }"></class-average-chart>
            </el-col>
            <el-col :span="12" class="parent">
                <el-row :gutter="20">
                    <el-col :span="24" class="item">
                        <tag-strength-chart :data="{ studentList, tagList }"></tag-strength-chart>
                    </el-col>
                    <el-col :span="24" class="item">
                        <risk-student-list :data="{ studentList, tagList }"></risk-student-list>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import axios from 'axios'
import { onMounted, reactive, ref, nextTick } from 'vue'
// import { ElMessage } from 'element-plus'
import ClassAverageChart from '../../components/home/ClassAverageChart.vue'
import TagStrengthChart from '../../components/home/TagStrengthChart.vue'
import RiskStudentList from '../../components/home/RiskStudentList.vue'

const studentList = ref([])
const classList = ref([])
const tagList = ref([])

const isCreated = ref(false)

onMounted(async () => {
    await Promise.all([getStudents(), getClasses(), getTags()])

    // 调用接口获取班级列表数据
    // await getStudents()

    // 调用接口获取班级列表数据
    // await getClasses()

    // 调用接口获取技术标签数据
    // await getTags()

    // console.log(studentList.value, classList.value, tagList.value)

    isCreated.value = true
})

const getStudents = async () => {
    var res = await axios.get('/adminapi/students')
    studentList.value = res.data
}

const getClasses = async () => {
    var res = await axios.get('/adminapi/classes')
    classList.value = res.data
}

const getTags = async () => {
    var res = await axios.get('/adminapi/tags')
    tagList.value = res.data
}

</script>

<style lang="scss" scoped>
#home {
    background: url('../../assets/bg.png') no-repeat center;
    background-size: 100% 100%;
    padding: 10px;
    color: white;
}

.parent {
    height: 500px;

    .item {
        height: 250px;
    }
}
</style>